// 搜索组件
export const searchComponent = {
  template: `
    <div class="search-component">
      <div class="search-input-container">
        <input 
          type="text" 
          class="search-input" 
          :placeholder="placeholder" 
          :value="modelValue" 
          @input="$emit('update:modelValue', $event.target.value)"
          @keyup.enter="onSearch"
        >
        <button 
          v-if="modelValue && modelValue.length > 0" 
          class="clear-button" 
          @click="clearSearch"
          title="清除搜索"
        >
          ×
        </button>
        <button class="search-button" @click="onSearch">
          <span class="search-icon">🔍</span>
          <span>搜索</span>
        </button>
      </div>
    </div>
  `,
  props: {
    modelValue: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '全局搜索...'
    }
  },
  emits: ['update:modelValue', 'search', 'clear'],
  methods: {
    onSearch() {
      this.$emit('search', this.modelValue);
    },
    clearSearch() {
      this.$emit('update:modelValue', '');
      this.$emit('clear');
      // 自动聚焦到输入框
      this.$nextTick(() => {
        const input = this.$el.querySelector('.search-input');
        if (input) {
          input.focus();
        }
      });
    }
  }
};